<template>
  <view class="full-page">
    <view class="avatar-wrapper">
      <button class="avatar-btn" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
        <image :src="avatarUrl" class="refresh-icon"></image>
        <text class="tip">点击修改</text>
      </button>
    </view>
    <view class="nickname-wrapper">
      <text>昵称：</text>
      <input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
        @input="bindinput" />
    </view>
    <view class="avatar-btn-wrapper">
      <button class="ai-btn ai-btn--lg ai-btn--block ai-btn--primary" @click="saveAvatar">保存</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
        nickName: "",
      };
    },
    methods: {
      bindblur(e) {
        // 获取微信昵称
        this.nickName = e.detail.value;
      },
      bindinput(e) {
        // 这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
        this.nickName = e.detail.value;
      },
      onChooseavatar(e) {
        let self = this;
        let {
          avatarUrl
        } = e.detail;
        uni.showLoading({
          title: '加载中'
        });
        let url = this.$urls.getApi("avatarUpload")
        this.$upload(url, avatarUrl).then(res => {
          console.log("upload:", res)
          this.avatarUrl = res.module
          uni.hideLoading();
        })
      },
      saveAvatar() {
        if (this.nickName === '') {
          this.$toast("请输入昵称")
          return false;
        }
        let url = this.$urls.getApi("saveAvatar")
        this.$post(url, {
            data: {
              avatar: this.avatarUrl,
              nickName: this.nickName
            }
          })
          .then(res => {
            uni.navigateTo({
              url: "/pages/index/index"
            })
          })
      }

    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  @import "@/styles/_button.scss";

  .full-page {
    background-color: var(--white);
    min-height: 100vh;
  }

  .avatar-wrapper {
    padding: 80rpx 0 40rpx;
    background: #fff;

    .avatar-btn {
      background: #fff;
      line-height: 80rpx;
      height: auto;
      width: auto;
      padding: 20rpx 30rpx;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .refresh-icon {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8px;
      }
      
      .tip {
        color: var(--brand-2);
        font-size: $font-size-md;
      }
    }
  }

  .nickname-wrapper {
    background: var(--white);
    padding: $gutter $gutter;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--gray-7);
    border-bottom: 1px solid var(--gray-7);

    .weui-input {
      padding-left: $gutter;
      flex-grow: 1;
    }
  }
  
  .avatar-btn-wrapper {
    margin-top: $gutter * 2;
    padding: 0 $gutter;
  }
</style>